<template>
  <div class="user-page">
    <el-header class="header">
      <el-button icon="SwitchButton" @click="doLogout"></el-button>
      <div class="title">Transform Attention演示</div>
      <div>
        <el-dropdown split-button trigger="click">
          {{ username }},{{ userGroups }}
          <template #dropdown>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click="()=>{isEditingUser=true;showCreateUserDlg=true}">修改用户信息</el-dropdown-item>
              <el-dropdown-item  v-if="isAdmin()" @click="()=>{isEditingUser=false;showCreateUserDlg=true}">新增用户</el-dropdown-item>
              <el-dropdown-item  v-if="isAdmin()" @click="()=>{showDeleteUserDlg=true}">删除用户</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <div class="background">
    </div>
    <div class="input-area">
      <TextInputTranslate @translate-result="onTranslateResult"></TextInputTranslate>
    </div>
    <el-row class="figure-row">
      <el-col :span="6" class="desc-col" style="display: flex; align-items: flex-start;">
        <div>
          <div>
            <el-button type="primary" @click="showAskQuestionDlg=true" v-if="isStudent()">提问</el-button>
            <el-button type="primary" @click="showViewQuestionAnswerDlg=true" v-if="isStudent()">查看解答</el-button>
            <el-button type="primary" @click="showEditQuestionDlg=true" v-if="isStudent()">编辑被拒问题</el-button>
            <el-button type="primary" @click="showAuditQuestionDlg=true" v-if="isAdmin()">审核提问</el-button>
            <el-button type="primary" @click="showAnswerQuestionDlg=true" v-if="isResearcher()">查看提问</el-button>
          </div>
          <div>
            <div class="desc-content">
              <el-text size="large">
                <h2>Transformer 结构说明</h2>
              </el-text>
              <el-tree :data="transformerTreeData" :props="transformerTreeProps" class="arch-tree"/>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12" class="figure-col">
        <div>
          <TransformerOneBlock v-if="showStatus===STATUS_ONE_BLOCK"
            @transformer-selected="onTransformerSelected"
            :input="translateResult ? translateResult.src_words : ''"
            :output="translateResult ? translateResult.output_words : ''"
          ></TransformerOneBlock>
          <TransformerEncoderDecoder v-if="showStatus===STATUS_ENCODER_DECODER" 
            @encoder-decoder-selected="onEncoderDecoderSelected"
            :input="translateResult ? translateResult.src_words : ''"
            :output="translateResult ? translateResult.output_words : ''"
          ></TransformerEncoderDecoder>
          <TransformerInputEncoder v-if="showStatus===STATUS_INPUT_ENCODER" 
            @input-encoder-selected="onInputEncoderSelected"
            :input="translateResult ? translateResult.src_words : ''"
          ></TransformerInputEncoder>
          <TransformerEncoderBlock v-if="showStatus===STATUS_ENCODER_BLOCK" @encoder-attention-selected="onEncoderAttentionSelected"></TransformerEncoderBlock>
          <AttentionView 
            v-if="showStatus===STATUS_ATTENTION_RELATION"
            :attentions="attentions"
            :labels="labels"
          ></AttentionView>
        </div>
      </el-col>
      <el-col :span="6" class="img-col">
        <img class="architecture-image" src="/transformer-transparent.png" alt="Transformer 架构图">
      </el-col>
    </el-row>
    <el-row>
      <div>
        <el-pagination
          @current-change="page=>{showStatus=page}"
          background
          layout="prev, pager, next"
          :page-count="5"
          class="mt-4"
        />
      </div>
    </el-row>
    <CreateUserDlg v-model="showCreateUserDlg"
      :isEditing="isEditingUser"
      @createuser-canceled="showCreateUserDlg=false"
      @createuser-success="showCreateUserDlg=false"
    ></CreateUserDlg>
    <DeleteUserDlg v-model="showDeleteUserDlg"
      @deleteusers-canceled="showDeleteUserDlg=false"
      @deleteusers-success="showDeleteUserDlg=false"
    ></DeleteUserDlg>
    <AskQuestionDlg v-model="showAskQuestionDlg"
      @askQuestion-canceled="showAskQuestionDlg=false"
      @askQuestion-success="showAskQuestionDlg=false"
    ></AskQuestionDlg>
    <AuditQuestionDlg v-model="showAuditQuestionDlg"
      @auditQuestion-canceled="showAuditQuestionDlg=false"
    ></AuditQuestionDlg>
    <AnswerQuestionDlg v-model="showAnswerQuestionDlg"
      @answerQuestion-canceled="showAnswerQuestionDlg=false"
    ></AnswerQuestionDlg>
    <ViewQuestionAnswerDlg v-model="showViewQuestionAnswerDlg"
      @viewQuestionAnswer-canceled="showViewQuestionAnswerDlg=false"
    ></ViewQuestionAnswerDlg>
    <EditRejectedQuestionDlg v-model="showEditQuestionDlg"
      @editQuestion-canceled="showEditQuestionDlg=false"
    ></EditRejectedQuestionDlg>
  </div>
</template>

<script setup>
import { ref, markRaw } from 'vue'
import { useRouter } from 'vue-router'
import TransformerEncoderDecoder from './TransformerEncoderDecoder.vue'
import TransformerOneBlock from './TransformerOneBlock.vue'
import TransformerInputEncoder from './TransformerInputEncoder.vue'
import TransformerEncoderBlock from './TransformerEncoderBlock.vue'
import { logout, clearToken, getUserName, getUserGroupsString, isAdmin, isResearcher, isStudent } from "../utils/apiUser.js"
import TextInputTranslate from "./TextInputTranslate.vue"
import AttentionView from './AttentionView.vue'
import CreateUserDlg from './CreateUserDlg.vue'
import DeleteUserDlg from './DeleteUserDlg.vue'
import AskQuestionDlg from './AskQuestionDlg.vue'
import AuditQuestionDlg from './AuditQuestionDlg.vue'
import AnswerQuestionDlg from './AnswerQuestionDlg.vue'
import ViewQuestionAnswerDlg from './ViewQuestionAnswerDlg.vue'
import EditRejectedQuestionDlg from './EditRejectedQuestionDlg.vue'
import { transformerTreeData, transformerTreeProps } from '../utils/transformer_tree_data.js'

defineExpose({
  isAdmin,
  isResearcher,
  isStudent,
  transformerTreeData,
  transformerTreeProps
})

const showCreateUserDlg = ref(false)
const showDeleteUserDlg = ref(false)
const isEditingUser = ref(false)
const showAskQuestionDlg = ref(false)
const showAuditQuestionDlg = ref(false)
const showAnswerQuestionDlg = ref(false)
const showViewQuestionAnswerDlg = ref(false)
const showEditQuestionDlg = ref(false)

// const currentPage = ref(1)
const totalPages = ref(5)

const STATUS_ONE_BLOCK = 1
const STATUS_ENCODER_DECODER = 2
const STATUS_INPUT_ENCODER = 3
const STATUS_ENCODER_BLOCK = 4
const STATUS_ATTENTION_RELATION = 5

const showStatus = ref(STATUS_ONE_BLOCK)

function onTransformerSelected() {
  console.log('transformer-selected received')
  showStatus.value = STATUS_ENCODER_DECODER
}

function onEncoderDecoderSelected() {
  console.log('encoder-decoder-selected')
  showStatus.value = STATUS_INPUT_ENCODER
}

function onInputEncoderSelected() {
  console.log('input-encoder-selected')
  showStatus.value = STATUS_ENCODER_BLOCK
}

function onEncoderAttentionSelected() {
  console.log('encoder-attention-selected')
  showStatus.value = STATUS_ATTENTION_RELATION
}

// 必须在顶层调用。如果在函数里面调用返回undefined!
const router = useRouter()

function doLogout() {
  console.log('useRouter', router)
  logout().then(res => { }).catch(error => { }).finally(fin => {
    clearToken()
    router.push('/login')
  })
}

const username = ref(getUserName())
const userGroups = ref(getUserGroupsString())

const translateResult = ref(null)
const attentions = ref([])
const labels = ref([])

const onTranslateResult = (result) => {
  translateResult.value = result
  attentions.value = markRaw(JSON.parse(result.attentions))
  labels.value = result.src_tokens
}

const handleNodeClick = (transformerTreeData) => {
  console.log(transformerTreeData)
}


</script>

<style scoped>
.user-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

.input-area {
  margin-bottom: 10px;
}

.figure-row {
  width: 1600px;
}

.desc-col {
  padding-left: 50px;
  display: flex;
  justify-content: left; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.desc-content {
  display: block;
}

.arch-tree {
  background-color: rgba(0, 0, 0, 0.0);
}

.figure-col, .img-col {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.architecture-image {
  max-width: 100%;
  max-height: 100%;
}
</style>